<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
<head>
    <title>Spring Boot+WebSocket+点对点</title>
    <script th:src="@{js/sockjs.min.js}"></script>
    <script th:src="@{js/stomp.min.js}"></script>
    <script th:src="@{js/jquery-3.5.1.min.js}"></script>
</head>
<body>
<p>聊天室</p>

<form id="wiselyForm">
    <textarea rows="4" cols="60" name="text"></textarea>
    <input type="submit"/>
</form>

<script th:inline="javascript">
    $('#wiselyForm').submit(function(e) {
        //阻止其提交表单
        e.preventDefault();
        let text = $('#wiselyForm').find('textarea[name="text"]').val();
        sendSpittle(text);
    });

    //连接后端stomp 协议的节点 endpoint 名称为 endpointChat
    let sock = new SockJS("/endpointChat");
    //使用 Stomp 子协议的 WebSocket 客户端
    let stomp = Stomp.over(sock);
    stomp.connect('guest', 'guest', function(frame) {
        //订阅 /user/queue/notifications （后端）发送的消息，与在控制器的 messagingTmplate.convertAndSendToUser 中定义的订阅地址保持一致，
        //这里多一个/user，并且这个/suer 是必须的，使用了 /user 才会发送消息到指定的用户
        stomp.subscribe("/user/queue/notifications", handleNotification);
    });

    //接收后端消息
    function handleNotification(message) {
        $('#output').append("<b>Received:" + message.body + "</b><br/>");
    }

    //给后端发送消息
    function sendSpittle(text) {
        stomp.send("/chat", {}, text);
    }

    $('#stop').click(function() {
        sock.close();
    });

</script>

<div id="output"></div>
</body>
</html>